<template>
  <div class="ImgPreview">
    <headline :headline="'商品图片'" />
    <div class="preview" @mousewheel.prevent="rollImg">
      <img ref="ImgRef" :src="src | transImgUrl" class="img" @mousedown="move">
    </div>
    <div class="thumbnail-total">
      <div class="thumbnail">
        <div class="imgType">商品主图：</div>
        <div class="imgList">
          <el-image v-for="(img, index) in goodsPhotos.skuResourcesImg" :key="index" :src="img.resourceUrl | transImgUrl" @click="preview(img.resourceUrl)" />
        </div>
      </div>
      <div v-if="formRoute !== 'examine'" class="thumbnail">
        <div class="imgType">透明图：</div>
        <div class="imgList">
          <el-image v-for="(img, index) in goodsPhotos.transparentImg" :key="index" :src="img.resourceUrl | transImgUrl" @click="preview(img.resourceUrl)" />
        </div>
      </div>
      <div v-if="formRoute !== 'examine'" class="thumbnail">
        <div class="imgType">商品素材图：</div>
        <div class="imgList">
          <el-image
            v-for="(img, index) in goodsPhotos.skuOptionResources"
            :key="index"
            :src="img.resourceUrl | transImgUrl"
            @click="preview(img.resourceUrl)"
          />
        </div>
      </div>
      <div v-if="formRoute === 'examine'" class="thumbnail">
        <div class="items">
          <div class="imgType1">发起门店:</div>
          <div class="imgListsp">{{ remarkValue.storeNbr }}</div>
        </div>
        <div class="items">
          <div class="imgType1 imgType2">备注：</div>
          <div class="imgListsp" style="width: 300px">
            {{ remarkValue.remark }}
          </div>
        </div>
      </div>
      <div v-if="formRoute === 'examine'" class="thumbnail">
        <div class="imgType">文描错误作证:</div>
        <div class="imgList">
          <el-image v-for="(img, index) in goodsPhotos.transparentImg" :key="index" :src="img.resourceUrl | transImgUrl" @click="preview(img.resourceUrl)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headline from './headline'
import { authentication } from '@/utils/processingData.js'

export default {
  components: {
    headline
  },
  filters: {
    transImgUrl(url) {
      return authentication(url)
    }
  },
  props: {
    goodsPhotos: {
      type: Object,
      default: () => {
        return {
          skuOptionResources: [],
          transparentImg: [],
          skuResourcesImg: []
        }
      }
    },
    remarkValue: {
      type: Object,
      default: () => {
        return {
          storeNbr: null,
          remark: null
        }
      }
    }
  },
  data() {
    return {
      src: '',
      formRoute: '' // 从那个模块跳转
    }
  },
  mounted() {
    this.formRoute = this.$route.query.formRoute
    console.log('goodsPhotos', this.goodsPhotos)
  },
  methods: {
    preview(src) {
      this.src = src
      const img = document.querySelector('.img')
      const preview = document.querySelector('.preview')
      function setProportion() {
        // 画布的规格
        const previewWidth = preview.offsetWidth
        const previewHeight = preview.offsetHeight
        const imgWidth = img.offsetWidth
        const imgHeight = img.offsetHeight

        // 计算缩放比例
        const proportionHeight = Math.floor((previewHeight / imgHeight) * 100) / 100
        const proportionWidth = Math.floor((previewWidth / imgWidth) * 100) / 100
        const proportion = proportionHeight < proportionWidth ? proportionHeight : proportionWidth
        const left = `${previewWidth / 2 - imgWidth / 2}px`
        const top = `${previewHeight / 2 - imgHeight / 2}px`
        img.style.left = left
        img.style.top = top
        img.style.transform = `scale(${proportion})`
        img.removeEventListener('load', setProportion)
      }
      img.addEventListener('load', setProportion)
    },
    move(e) {
      e.preventDefault()
      // 获取元素
      const preview = document.querySelector('.preview')
      const img = document.querySelector('.img')
      const x = e.pageX - img.offsetLeft
      const y = e.pageY - img.offsetTop
      function move(e) {
        img.style.left = e.pageX - x + 'px'
        img.style.top = e.pageY - y + 'px'
      }
      // 添加鼠标移动事件
      preview.addEventListener('mousemove', move)
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener('mouseup', function () {
        preview.removeEventListener('mousemove', move)
      })
      // 鼠标离开父级元素，把事件移除
      preview.addEventListener('mouseout', function () {
        preview.removeEventListener('mousemove', move)
      })
    },
    // 缩放图片
    rollImg() {
      const data = this.$refs.ImgRef.style.transform.replace(/[^\d.]/g, '')
      if (event.wheelDelta > 0) {
        const proportion = data - 0 + 0.05
        if (proportion > 5) return
        this.$refs.ImgRef.style.transform = `scale(${proportion})`
      } else {
        const proportion = data - 0.05
        if (proportion < 0.1) return
        this.$refs.ImgRef.style.transform = `scale(${proportion})`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ImgPreview {
  .preview {
    position: relative;
    max-width: 100%;
    height: calc(60vh - 100px);
    border-radius: 5px;
    overflow: hidden;
    margin: 20px 0;
    margin-left: 20px;
    background-color: rgb(238, 238, 238);
    /* 马赛克背景图 */
    // background-position: 0px 0px, 5px 5px;
    // background-size: 10px 10px;
    // background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
    img {
      position: absolute;
      cursor: move;
    }
  }
  .thumbnail-total {
    height: calc(100vh - 60vh - 110px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 5px;
    }
    .thumbnail {
      display: flex;
      padding-left: 20px;
      .imgType {
        width: 95px;
        font-weight: 700;
      }
      .items {
        width: 50%;
        display: flex;
        .imgType1 {
          width: 85px;
          font-weight: 700;
          min-height: 50px;
        }
        .imgListsp {
          min-height: 50px;
        }
        .imgType2 {
          margin-left: 0px;
        }
      }

      .imgList {
        min-height: 50px;
        flex: 1;
        /deep/ .el-image {
          cursor: pointer;
          width: 50px;
          height: 50px;
          border-radius: 8px;
          margin: 0 10px 10px 0;
        }
      }
    }
  }
}
</style>
>
